---
title: المصادقة
description: مصادقة المستخدمين الخاصين بك
---

# المصادقة

## تقديم الوصول المصادق عليه إلى تطبيقك

يمكنك اختياريًا إجبار المستخدمين على التوقيع على رسالة باستخدام محفظتهم خلال عملية الاتصال، مما يثبت أنهم يملكون الحساب المتصل ويتيح لك إنشاء جلسة مستخدم مصادق عليها تتمتع بالوصول المميز إلى تطبيقك.

بينما يمكن [الدمج مع خلفيات مخصصة وتنسيقات الرسائل،](/docs/custom-authentication) يوفر RainbowKit دعمًا من الدرجة الأولى لـ [تسجيل الدخول بـ Ethereum](https://login.xyz) و [NextAuth](https://next-auth.js.org).

### إعداد تسجيل الدخول بـ Ethereum و NextAuth

#### تثبيت

قم بتثبيت حزمة `@rainbow-me/rainbowkit-siwe-next-auth`.

```bash
npm install @rainbow-me/rainbowkit-siwe-next-auth
```

#### إعداد الموفر

في مكون `App` الخاص بك، قم باستيراد `RainbowKitSiweNextAuthProvider`.

```tsx
import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
```

قم بتغليف `RainbowKitProvider` بـ `RainbowKitSiweNextAuthProvider`، مع التأكد من أنه مدمج داخل `SessionProvider` الخاص بـNextAuth حتى يتمكن من الوصول إلى الجلسة.

```tsx
import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { SessionProvider } from 'next-auth/react';
import type { Session } from 'next-auth';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function App({
  Component,
  pageProps,
}: AppProps<{
  session: Session;
}>) {
  return (
    <WagmiProvider {...etc}>
      <SessionProvider refetchInterval={0} session={pageProps.session}>
        <QueryClientProvider client={queryClient}>
          <RainbowKitSiweNextAuthProvider>
            <RainbowKitProvider {...etc}>
              <Component {...pageProps} />
            </RainbowKitProvider>
          </RainbowKitSiweNextAuthProvider>
        </QueryClientProvider>
      </SessionProvider>
    </WagmiProvider>;
  );
}
```

مع وجود `RainbowKitSiweNextAuthProvider`، سيتم حث المستخدمين الآن على المصادقة بتوقيع رسالة بمجرد أن يقوموا بتوصيل محفظتهم.

#### تخصيص خيارات رسالة SIWE

يمكنك تخصيص [خيارات رسالة SIWE](https://viem.sh/docs/siwe/utilities/createSiweMessage#parameters) عن طريق تمرير دالة إلى الخاصية `getSiweMessageOptions` في `RainbowKitSiweNextAuthProvider`.

سيتم استدعاء هذه الوظيفة كلما تم إنشاء رسالة جديدة. سيتم دمج الخيارات التي يتم إرجاعها من هذه الوظيفة مع الخيارات الافتراضية.

```tsx
import {
  RainbowKitSiweNextAuthProvider,
  GetSiweMessageOptions,
} from '@rainbow-me/rainbowkit-siwe-next-auth';

const getSiweMessageOptions: GetSiweMessageOptions = () => ({
  statement: 'Sign in to my RainbowKit app',
});

<RainbowKitSiweNextAuthProvider
  getSiweMessageOptions={getSiweMessageOptions}
>
  ...
</RainbowKitSiweNextAuthProvider>;
```

#### الوصول إلى الجلسة على الجانب الخادم

يمكنك الوصول إلى رمز الجلسة باستخدام وظيفة `getToken` الخاصة بـ NextAuth المستوردة من `next-auth/jwt`. إذا كان المستخدم قد قام بالمصادقة بنجاح، سيكون خاصية `sub` في رمز الجلسة (الموضوع في الرمز، أي المستخدم) هو عنوان المستخدم.

يمكنك أيضًا تمرير كائن الجلسة المستقر من الخادم عبر `getServerSideProps` بحيث لا يحتاج NextAuth إلى حله مرة أخرى على العميل.

على سبيل المثال:

```tsx
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { getSession } from 'next-auth/react';
import { getToken } from 'next-auth/jwt';
import React from 'react';

export const getServerSideProps: GetServerSideProps = async context => {
  const session = await getSession(context);
  const token = await getToken({ req: context.req });

  const address = token?.sub ?? null;
  // If you have a value for "address" here, your
  // server knows the user is authenticated.

  // You can then pass any data you want
  // to the page component here.
  return {
    props: {
      address,
      session,
    },
  };
};

type AuthenticatedPageProps = InferGetServerSidePropsType<
  typeof getServerSideProps
>;

export default function AuthenticatedPage({
  address,
}: AuthenticatedPageProps) {
  return address ? (
    <h1>Authenticated as {address}</h1>
  ) : (
    <h1>Unauthenticated</h1>
  );
}
```

لمزيد من المعلومات حول إدارة الجلسة، يمكنك الرجوع إلى التوثيق التالي:

- [دليل المصادقة Next.js](https://nextjs.org/docs/pages/guides/authentication)
- [توثيق NextAuth](https://next-auth.js.org)
